<template>
  <view v-if="shenheStatus == 0 && memberInfo.qr_url" class="page" >
    <view class="page-content">
      <view class="content-top">
        <image class="user-avator" :src="memberInfo.avatar" mode="" />
        <view class="user-info">
          <view class="user-name">
            <text>{{ memberInfo.name }}</text>
            <image
              src="https://chidian.chixiaodian.com/web/uploads/images/store_1/2021-10-21/9741a6cec026f1db41c9c6c7c9e761b7c6c7c3c5.png"
              mode="aspectFill"
            />
          </view>
          <view class="user-member">
            <text>{{ memberInfo.level_name }}</text>
            <u-icon size="15" color="#FFFFFF" name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
      <view class="content-foot">
        <view class="title">{{ $t('mdAdmin.showCode') }} </view>
        <image :src="memberInfo.qr_url" mode="aspectFill" />
				<image  class="content-foot-code" :src="memberInfo.code_path" mode="widthFix" />
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      memberInfo: {},
    };
  },
  onLoad(t) {},
  onShow() {
    this.getUserCode();
  },
  filters: {},
  methods: {
    // 获取用户核销码
    getUserCode() {
      uni.showLoading({
        title: this.$t('home.loading'),
      });
      this.$allrequest.mdAdmin.getMemberCode().then(res => {
        uni.hideLoading();
        if (!res.code && res.data) {
          this.memberInfo = res.data;
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background: #f2f2f2;
  padding-top: 80rpx;

  .page-content {
    width: 92vw;
    margin: 0 auto;
    border-radius: 24rpx;
    .content-top {
      width: 100%;
      height: 192rpx;
      background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
      border-radius: 24rpx 24rpx 0px 0px;
      display: flex;
      align-items: center;
      padding-left: 34rpx;
      .user-avator {
        width: 120rpx;
        height: 120rpx;
        background: #f3f4f6;
        border: 4rpx solid #ffffff;
        border-radius: 50%;
      }
      .user-info {
        margin-left: 20rpx;
        .user-name {
          display: flex;
          align-items: center;
          text {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 600;
            color: #ffffff;
          }
          image {
            width: 28rpx;
            height: 28rpx;
            display: block;
            margin-left: 16rpx;
          }
        }
        .user-member {
          width: 110rpx;
          height: 30rpx;
          background-color: rgba(0, 0, 0, 0.2);
          border-radius: 15rpx;
          margin-top: 16rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          text {
            font-size: 18rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.94);
          }
        }
      }
    }
    .content-foot {
      width: 100%;
      height: 700rpx;
      background: #ffffff;
      border-radius: 0 0 24rpx 24rpx;
      padding-top: 40rpx;

      .title {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8c8c8c;
        text-align: center;
      }
      image {
        width: 388rpx;
        height: 388rpx;
        background: #f3f4f6;
        margin: 64rpx auto 0;
        display: block;
      }
    }
  }
}
</style>
